<template>
  <div class="nick">
    <div class="title">
      <svg
        @click="$router.back()"
        t="1671798247143"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2281"
        width="200"
        height="200"
      >
        <path
          d="M319.64 512.016l336.016-336.008 45.248 45.248L364.896 557.28z"
          p-id="2282"
        ></path>
        <path
          d="M365.216 466.464l339.976 339.968-45.256 45.256-339.976-339.976z"
          p-id="2283"
        ></path>
      </svg>
      <span>修改昵称</span>
      <span></span>
    </div>
    <div class="input">
      <input
        type="text"
        placeholder="这么好的你，应该拥有更好的昵称~"
        v-model="text"
      />
    </div>
    <div class="submit">
      <button @click="keepNickname">保存</button>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      text: "",
      info: null,
      token: null,
    };
  },
  created() {
    this.token = localStorage.getItem("fastCar-token");
  },
  methods: {
    async keepNickname() {
      await this.axios({
        url: "https://m-mall.gxptkc.com/v3/member/front/member/updateInfo",
        method: "POST",
        headers: {
          authorization: `Bearer ${this.token}`,
        },
        data: qs.stringify({
          memberNickName: this.text,
        }),
      });
      this.$router.push("/person");
    },
  },
};
</script>

<style lang="scss" scoped>
.nick {
  background-color: rgb(245, 245, 245);
  height: 100vh;
  width: 100vw;
  .title {
    display: flex;
    justify-content: space-between;
    padding: 10rem;
    background-color: #fff;
    margin-bottom: 10rem;
    svg {
      width: 25rem;
      height: 25rem;
    }
    span {
      font-size: 16rem;
      color: #000;
      font-weight: bold;
    }
  }
  .input {
    background-color: #fff;
    padding: 10rem;
    box-sizing: border-box;
    input {
      width: 100%;
      box-sizing: border-box;
      padding: 5rem 0;
      border: none;
    }
  }
  .submit {
    display: flex;
    justify-content: center;
    button {
      width: 80vw;
      height: 40rem;
      margin-top: 20rem;
      background: linear-gradient(-90deg, #fb1d1b, #ff7a18);
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      border: none;
      border-radius: 20rem;
    }
  }
}
</style>